<template>
  <!-- 永续合约开仓页 -->
  <div class="perpetual-open">
    <div class="flex pt-34  ">
      <div class="w-180 h-60 lh-60 text-center rounded tabBackground textColor">{{ $t('全仓') }}</div>
      <!-- <div class="w-80 h-60 lh-60 ml-29 rounded tabBackground textColor" style="text-align:center">1x</div> -->
      <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor"
        v-if="selectIndex / 1 === 1 && currentType === 'open'">
        <div @click="showOptions = !showOptions" style="height:100%; box-sizing: border-box"
          class="relative word-30 pl-28 pr-10 w-140 h-60 tabBackground select-wrap flex justify-between items-center">
          {{ form.lever_rate }}x <img src="../../assets/image/public/grey-select.png" alt="select-icon"
            class="w-22 h-11" />
          <div v-if="showOptions" class="options tabBackground w-140 absolute top-97 left-0 z-10">
            <div class="w-full" @click.stop="handleChoose(item)"
              :class="{ 'option-active': form.lever_rate === item.lever_rate }" :value="item.lever_rate"
              v-for="item in initData.lever" :key="item.id">
              {{ item.lever_rate }}x
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-30 pb-20">
      <div class="flex">
        <div class="w-440 flex flex-col">
          <template v-if="selectIndex == 1">
            <!-- <div class="tabcon">
              <div class="tab">
                <a class="font-28" :class="currentType=='open'?'open':''" @click="changeTab('open')"><span>{{ $t('开仓')
                    }}</span></a>
                <img v-if="currentType=='open'" src="../../assets/image/public/right.png" alt="" />
                <img v-if="currentType=='close'" src="../../assets/image/public/left.png" alt="" />
                <a class="font-28" :class="currentType=='close'?'open':''" @click="changeTab('close')"><span>{{ $t('平仓')
                    }}</span></a>
              </div>
            </div> -->
            <div class="flex items-center h-66 rounded-lg tabBackground">
              <p class="font-28 flex-1 flex items-center justify-center h-66 textColor "
                :class="currentType == 'open' ? 'open' : ''" @click="changeTab('open')">{{ $t('开仓') }}</p>
              <p class="font-28 flex-1 flex items-center justify-center h-66 textColor"
                :class="currentType == 'close' ? 'close' : ''" @click="changeTab('close')">{{ $t('平仓') }}</p>
            </div>
            <div class="mt-22 mb-22" style="position:relative;">
              <div class="greyBg flex justify-between items-center w-full h-76 rounded-lg textColor" @click="selectBtn">
                <img src="../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20" />
                <div class="text-center" style="width:80%;">{{ title }}</div>
                <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
              </div>
              <div class="option-box" v-show="isShow">
                <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title
                }}</div>
              </div>
            </div>
          </template>
          <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" />
          <div class="h-76 lh-76 greyBg mb-22 flex pr-20 justify-center rounded-lg textColor" v-if="selectIndex == 1">
            <input placeholder="" class="greyBg w-full pl-20  h-76 border-none text-left rounded-lg"
              :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
            <span class="ml-20">USDT</span>
          </div>
          <div class="w-440 flex items-center greyBg h-76 lh-76 rounded-lg">
            <div v-if="selectIndex == 1" class="w-80 flex items-center justify-center" style="height:100%;"
              @click="onReduce">
              <img src="../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
            </div>
            <input
              :placeholder="selectIndex == 1 ? $t('张数') : ($t('最少') + initFutrue && initFutrue.para ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : '')"
              class="border-none greyBg text-center textColor" style="width: 156px;" v-model="form.amount" type="number"
              @input="onInput" />
            <div class="w-80 flex items-center justify-center" style="height:100%;">
              <template v-if="selectIndex == 1">
                <img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
              </template>
              <template v-else>
                <span class="textColor">USDT</span>
              </template>
            </div>
          </div>
          <template v-if="selectIndex == 1">
            <div class="mt-15 mb-22 w-full flex justify-between items-center">
              <span class="font-22 font-400 text-grey">{{ this.currentType === 'open' ? $t('可开张数') : $t('可平张数')
              }}</span>
              <span class="font-22 font-400 textColor">{{ this.currentType === 'open' ? options.max : initData.amount /
                (initData.lever_rate ? initData.lever_rate : 1) }} {{ $t('张') }}</span>
            </div>
            <vue-slider v-bind="options" v-model="form.amount"></vue-slider>
            <div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center">
              <span class="flex-1 text-left">0%</span>
              <span class="flex-1 text-left">25%</span>
              <span class="flex-1 text-center">50%</span>
              <span class="flex-1 text-right">75%</span>
              <span class="flex-1 text-right">100%</span>
            </div>
          </template>
          <template v-if="selectIndex == 1 && userInfo.token">
            <div class="flex justify-between mt-16">
              <div class="text-grey">{{ currentType === 'open' ? $t('合约金额') : $t('可平金额') }}</div>
              <div class="textColor">{{ currentType === 'open' ? initData.amount * (form.amount / 1) * form.lever_rate :
                options.max *
                initOpen.amount * (initData.lever_rate ? initData.lever_rate : 1) | nan }} USDT</div>
            </div>
            <div class="flex justify-between mt-16" v-if="this.currentType === 'open'">
              <div class="text-grey">{{ $t('保证金') }}</div>
              <div class="textColor">{{ initData.amount * (form.amount / 1) | nan }} USDT</div>
            </div>
            <div class="flex justify-between mt-16" v-if="this.currentType === 'open'">
              <div class="text-grey">{{ $t('建仓手续费') }}</div>
              <div class="textColor">{{ userInfo.perpetual_contracts_status === '1' ? initData.fee *
                (form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate | nan }} USDT</div>
            </div>
          </template>
          <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
            <div>{{ $t('可用USDT') }}</div>
            <div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
          </div>
          <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2">
            <div>{{ $t('手续费') }}</div>
            <div class="textColor">{{ ((form.amount * (initFutrue && initFutrue.para ? initData.para[paraIndex].unit_fee :
              ''))).toFixed(2)
              | nan }} USDT
            </div>
          </div>
          <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-20" :class="{ 'mt-30': selectIndex == 2 }"
            @click="order('open')" v-if="userInfo.token">
            <div class="font-34 relative text-center" style="flex-grow:1;">
              {{ this.currentType === 'open' ? $t('开') : $t('平') }}{{ $t('多') }}
              <span class="right-word font-22 text-center">{{ $t('看涨') }}</span>
            </div>
          </div>
          <div v-else class="w-full mt-120">
            <div class="textColor">
              <p>{{ $t('套期保值，风险对冲') }}</p>
              <p class="pt-8">{{ $t('登陆后继续') }}</p>
            </div>
            <div class="h-80 lh-80 btnBackground flex text-white1 rounded-md justify-center mt-50"
              @click="$router.push('/login')">{{ $t('登录后进行交易') }}</div>
          </div>
          <template v-if="selectIndex == 1 && userInfo.token">
            <div class="flex justify-between mt-16">
              <div class="text-grey">{{ currentType === 'open' ? $t('合约金额') : $t('可平金额') }}</div>
              <div class="textColor">{{ currentType === 'open' ? initData.amount * (form.amount / 1) * form.lever_rate :
                options.max *
                initOpen.amount * (initData.lever_rate ? initData.lever_rate : 1) | nan }} USDT</div>
            </div>
            <div class="flex justify-between mt-16" v-if="this.currentType === 'open'">
              <div class="text-grey">{{ $t('保证金') }}</div>
              <div class="textColor">{{ initData.amount * (form.amount / 1) | nan }} USDT</div>
            </div>
            <div class="flex justify-between mt-16" v-if="this.currentType === 'open'">
              <div class="text-grey">{{ $t('建仓手续费') }}</div>
              <div class="textColor">{{ userInfo.perpetual_contracts_status === '1' ? initData.fee * (form.amount / 1) :
                initData.fee * (form.amount / 1) * form.lever_rate | nan }} USDT</div>
            </div>
          </template>
          <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10"
            :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')" v-if="userInfo.token">
            <div class="relative font-34 text-center" style="flex-grow:1;">
              {{ this.currentType === 'open' ? $t('开') : $t('平') }}{{ $t('空') }}
              <span class="right-word font-22 text-center">{{ $t('看跌') }}</span>
            </div>
          </div>
        </div>
        <div class="ml-30">
          <div class="w-290 flex justify-between  text-grey font-22">
            <div>
              <div>{{ $t('价格') }}</div>
              <div class="mt-4">(USDT)</div>
            </div>
            <div class="text-right items-end justify-end">
              <div class="">{{ $t('数量') }}</div>
              <div class="mt-4">({{ symbol.toUpperCase() || '--' }})</div>
            </div>
          </div>
          <div class="w-290 flex justify-between pt-22 font-26" v-for="(item, index) in greenData" :key="index"
            @click="onQuickPrice(item.price)" :style="{
              'background': `linear-gradient(to right,${THEME == 'dark' ? '#1E2030' : '#ffffff'} 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) 100%)'
            }">
            <div class="text-green">{{ item.price }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib' || symbol == 'btt'">{{ fixDate(item.amount, $i18n) ||
              '--' }}</div>
            <div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
          </div>
          <div class="w-290 text-red pt-22 font-34 font-700 text-center">{{ price || '--' }}</div>
          <div class="w-290 flex justify-between pt-22 font-26" v-for="(item, index) in redData" :key="item + index"
            @click="onQuickPrice(item.price)" :style="{
              'background': `linear-gradient(to right,${THEME == 'dark' ? '#1E2030' : '#ffffff'} 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) 100%)'
            }">
            <div class="text-red ">{{ item.price }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib' || symbol == 'btt'">{{ fixDate(item.amount, $i18n) ||
              '--' }}</div>
            <div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" class="rounded-2xl">
      <!-- <popup-confirm-order 
                :detailData="detailData" :paras="initFutrue.para" :active="form.para_id"
                :symbol="symbol" :amount="form.amount" :direction="form.direction"
                :balance="initFutrue.amount" :price="price" :para-index="paraIndex"
                @close="onClose" @confirm="onOrderConfirm" v-if="popType === 'confirm'"/> -->
      <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
        @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
    </van-popup>
  </div>
</template>

<script>
import config from "@/config";
import { Popup } from 'vant';
import { mapGetters } from 'vuex'
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
import { _orderOpen, _orderClose, _futrueOrder, _futrueOrderDetail, _getBalance, _futrueOrderInit } from '@/API/trade.api'
import ContractFutrue from '@/components/contract-futrue'
import PopupDelivery from "@/components/popup-delivery";
import { fixDate } from "@/utils/utis";
import { THEME } from '@/config/theme'
// import PopupConfirmOrder from '@/components/popup-confirm-order'
export default {
  name: "perpetualPosition",
  components: {
    VueSlider,
    ContractFutrue,
    [Popup.name]: Popup,
    PopupDelivery,
    // PopupConfirmOrder
  },
  props: {
    greenData: { // 买单
      type: Array,
      default() {
        return []
      }
    },
    redData: { // 卖单
      type: Array,
      default() {
        return []
      }
    },
    symbol: {
      type: String,
      default: ''
    },
    price: {
      type: [Number, String],
      default: '0.00'
    },
    initOpen: {
      type: Object,
      default() {
        return {}
      }
    },
    initClose: {
      type: Object,
      default() {
        return {}
      }
    },
    initFutrue: {
      type: Object,
      default() {
        return {}
      }
    },
    selectIndex: {
      type: [String, Number],
      default: 1
    },
  },
  watch: {
    price(val) {
      if (this.type === '1') { // !this.focus &&
        this.form.price = val
      }
      this.form.para_id = this.initFutrue.para && this.initFutrue.para[this.paraIndex].para_id // 不优雅，不可靠
      // this.form.symbol = this.symbol.toLowerCase()
    },
    initOpen: { // 处理滚动条初始值
      deep: true,
      handler(val) {
        this.handleInitSliderOption()
      }
    },
    initClose: { // 处理滚动条初始值
      deep: true,
      handler(newVal, oldVal) {
        if (newVal.amount / 1 > 0) {
          this.handleInitSliderOption(true)
        }
      }
    }
    // symbol(val) {
    //     this.form.symbol = val.toLowerCase()
    // }
  },
  computed: {
    ...mapGetters('user', ['userInfo']),
    initData() {
      let obj = null
      console.log('selectIndex open', this.selectIndex)
      if (this.selectIndex / 1 === 1) {

        if (this.currentType === 'open') {
          obj = this.initOpen
        } else {
          obj = this.initClose
        }
        if (!obj.lever || !obj.lever.length) { // 倍数
          obj.lever = [{ id: 1, lever_rate: 1 }]
        }
        return obj
      }
      return this.initFutrue
    },
    coudBuyVolume() { // 可买数量
      return Math.floor((this.initOpen.volume / 1) / this.form.lever_rate)
    },
  },
  filters: {
    nan(val) {
      return isNaN(val) ? '--' : val
    }
  },
  data() {
    return {
      THEME,
      fixDate,
      currentBuyType: '', // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
      timeout2: null,
      timeout: null,
      detailData: {}, // 交割合约订单详情数据
      show: false,
      popType: 'confirm', // 弹框类型 confirm / counting
      showOptions: false,
      options: config.sliderOptions,
      value: 0,
      isShow: false,
      title: this.$t('市价'),
      paraIndex: 0,
      selectData: [
        { title: this.$t('市价'), type: '1' },
        { title: this.$t('限价'), type: '2' },
      ],
      form: {
        symbol: '', // 币种
        session_token: '',
        direction: 'buy', // 买or卖
        price_type: 'opponent', // 市价or限价
        lever_rate: 1, // 杠杆
        price: '',
        amount: '', // 数量
        para_id: '' // 交割周琦id
      },
      focus: false,
      type: "1",//选中市价或限价类型
      currentType: "open", //开仓类型
      // action: _orderOpen // 开仓or
    }
  },
  beforeDestroy() {
    this.clearTimeout()
  },
  activated() {
    this.selectData = [
      { title: this.$t('市价'), type: '1' },
      { title: this.$t('限价'), type: '2' },
    ]
    // this.title = this.$t('市价');
    this.currentType = 'open'
    this.title = this.selectData[0].title;
    this.type = this.selectData[0].type
  },
  methods: {
    continueTobuy(detailData) {
      this.show = false
      setTimeout(() => {
        this.$router.push(`/trendDetails/${detailData.symbol}?direction=${detailData.direction}`)
      }, 300);
    },
    onQuickPrice(price) { // 点击金额变化
      if (this.type === '2') {
        this.form.price = price
      }
    },
    clearTimeout() {
      clearTimeout(this.timeout)
      this.timeout = null
    },
    handleTimeEnd(order) {
      if (this.selectIndex / 1 === 2) { // 交割合约需要弹出详情框
        _futrueOrderDetail(order).then(data => {
          this.clearTimeout()
          this.detailData = data
          if (data.state !== 'created') {
            this.timeout = setTimeout(() => {
              this.handleTimeEnd(order)
            }, 1000)
          }
        })
      }
    },
    handleInitSliderOption(amount) {
      if (!amount) { // 金额是否需要变动
        this.form.amount = ''
      }
      console.log(this.initOpen.volume, this.form.lever_rate)
      let vol
      if (this.currentType === 'open') {
        vol = this.initOpen.volume / 1
      } else {
        vol = this.initClose.amount / (this.initData.lever_rate || 1)
      }
      this.options.max = Math.floor(vol)
      console.log('this.options.max', this.options.max)
      if (this.options.max > 0) {
        this.options.disabled = false
      } else {
        this.options.disabled = true
      }
    },
    handleChoose(item) {
      this.showOptions = !this.showOptions
      this.form.lever_rate = item.lever_rate
      console.log('handleChoose')
      this.handleInitSliderOption()
    },
    onAdd() { // +
      if (this.options.max === 0) {
        return
      }
      if (this.form.amount === this.options.max) {
        return;
      }
      this.form.amount++
    },
    onReduce() { // -
      if (this.form.amount > 1) {
        this.form.amount--
      }
    },
    onParaId({ id, index }) { // 交割日期
      // console.log(evt)
      this.form.para_id = id
      this.paraIndex = index
    },
    onInput() { // 数量变化
      // console.log(1111111, this.form.amount, this.selectIndex)
      if (this.selectIndex == 1 && this.options.max == 0) {
        this.form.amount = this.form.amount / 1
      } else if (this.selectIndex == 1 && this.form.amount / 1 > this.options.max / 1) {
        this.form.amount = this.options.max / 1
      }
    },
    //价格类型下拉框切换
    selectBtn() {
      this.isShow = !this.isShow;
    },
    //选择价格类型
    selectItem(item) {

      this.form.price_type = item.type === '1' ? 'opponent' : 'limit'
      this.title = item.title;
      this.type = item.type;
      this.form.price = this.price
      this.isShow = false;
    },
    //选择开仓类型
    changeTab(type) { // 开仓和
      console.log('changeTab', type)
      // TODO: 这里应该是换函数
      // this.form.direction = type === 'open' ? 'buy' : 'sell'
      if (this.currentType === type) {
        return
      }
      this.currentType = type;
      this.$emit('ordered', type)
      // if (this.currentType === 'close') {
      //   this.form.lever_rate = 1
      // }
      this.handleInitSliderOption()
    },
    onClose() { // 关闭
      this.show = false
      setTimeout(() => {
        this.popType = 'confirm'
      }, 500)
    },
    onOrderConfirm() { /// 交割合约确认
      this.show = false
      this.popType = 'counting'
      this.order(this.form.direction === 'buy' ? 'open' : 'close')
    },
    order(type) {
      if (!this.userInfo.token) {
        this.$router.push('/login')
        return false;
      }
      if (!this.form.amount) {
        if (this.selectIndex == 1) {
          this.$toast.fail(this.$t('请输入合约张数'))
        } else {
          this.$toast.fail(this.$t('请输入金额'))
        }
        return
      }

      // this.form.direction = type
      this.form.symbol = this.$route.params.symbol
      this.form.direction = type === 'open' ? 'buy' : 'sell'
      let _order = null // api
      let emitFunc = null // 触发函数
      this.form.amount = this.currentType === 'open' ? this.form.amount : this.form.amount * this.initData.lever_rate
      if (this.selectIndex / 1 === 1) { // 永续合约
        if (this.currentType === 'open') {
          this.form.session_token = this.initOpen.session_token
        } else {
          this.form.session_token = this.initClose.session_token
        }
        _order = this.currentType === 'open' ? _orderOpen : _orderClose
        emitFunc = this.currentType
        this.openOrder(_order, emitFunc);
      } else { // 交割合约
        this.form.session_token = this.initFutrue.session_token
        _order = _futrueOrder
        emitFunc = 'futrue'
        if (this.initFutrue.session_token == undefined || this.initFutrue.session_token == '') {
          _futrueOrderInit(this.symbol).then(data => {
            this.form.session_token = data.session_token;
            this.openOrder(_order, emitFunc);
          }).catch((err) => {
            if (err.code == 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
            else if (err.msg != undefined) { this.$toast(this.$t(err.msg)); }
          });
        }
        else {
          this.form.session_token = this.initFutrue.session_token;
          this.openOrder(_order, emitFunc);
        }
      }
    },
    openOrder(_order, emitFunc) {
      _order(this.form).then((res) => {
        this.$toast(this.$t('操作成功'))
        _getBalance().then(data => { // 刷新余额
          this.$store.commit('user/SET_USERINFO', { balance: data.money })
        })
        this.$emit('ordered', emitFunc)
        if (this.selectIndex / 1 === 2) { // 交割合约需要弹出详情框
          _futrueOrderDetail(res.order_no).then(data => {
            this.detailData = data
            this.show = true
          })
        }
      }).catch(() => { // 也需要重新初始化
        this.$emit('ordered', emitFunc)
      })
    },
  }
}
</script>

<style lang="scss">
.perpetual-open {
  font-size: 26px;
}

.options {
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
  border-radius: 6px;

  div {
    font-size: 22px;
    text-align: center;
    width: 140px;
    height: 50px;
    line-height: 50px;

    &.option-active {
      background-color: $tab_background;
    }
  }
}

.right-word {
  top: 50%;
  transform: translateY(-50%);
  right: 19px;
  position: absolute;
  border-radius: 6px;
}

.vue-slider {
  height: 3px !important;
  padding: 0 20px !important;
}

.vue-slider-dot {
  width: 32px !important;
  height: 32px !important;

}

.vue-slider-mark-label {
  font-size: 16px;
  margin-top: 14px !important;
}

.vue-slider-mark-label-active {
  color: #868D9A !important;
}

.vue-slider-dot-handle {
  border: 3px solid #2C78F8;
}

.vue-slider-mark {
  width: 20px !important;
  height: 20px !important;

  &:nth-child(1) {
    .vue-slider-mark-label {
      transform: translateX(-14px) !important;
    }
  }

  &:nth-child(5) {
    .vue-slider-mark-label {
      transform: translateX(-60px) !important;
    }
  }
}

// 开仓样式
.tabcon {
  // padding-bottom: 16%;
  position: relative;
  height: 80px;
}

.tab {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
  border-radius: 5px;
  overflow: hidden;
}

.tab>* {
  height: 100%;
}

.tab>img {
  margin-left: -2px;
  margin-right: -2px;
}

.tab>a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.open {
  background-color: #2EBD85;
  color: white;
}

// 下拉
.option-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  width: 100%;
  background-color: $grey_bg;
  text-align: center;
  box-shadow: 0px 0px 3px 3px $grey_bg;
  border-radius: 4px;
  color: $text-color;
  z-index: 10;
}

.option-box>div {
  padding: 30px 0;
}

.option-box>div:hover {
  background-color: #F5F5F5;
}

.num-text-color {
  color: #4C4A54;
}

select {
  appearance: none;
  /* 去掉默认图标 */
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  padding: 0 20px 0 20px;
  background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
  /* 自己的图*/
  background-size: 20px 11px;
}

.with100 {
  width: 100%;
}

.height100 {
  height: 100%;
}

.open {
  background-color: #2EBD85;
  background: url(@/assets/image/public/open-bg.png) no-repeat right center;
  background-size: 100% 100%;
  color: white;
}

.close {
  background-color: #2EBD85;
  background: url(@/assets/image/public/close-bg.png) no-repeat left center;
  background-size: 100% 100%;
  color: white;
}
</style>
